<template>
  <div>
    <el-card class="nav">
      <!-- 头部按钮 -->
      <div class="header">
        <div>
          <a class="left">关键字</a>
          <el-input v-model="queryInfo.keyword" />
        </div>
        <div class="right">
          <el-button @click="clearRandoms">清除</el-button>
          <el-button type="primary" @click="searchRandoms">搜索</el-button>
        </div>
      </div>
      <!-- 数据条数 -->
      <el-alert type="info" show-icon :closable="false">
        <span slot="title">数据一共{{ total }}条</span>
      </el-alert>
      <!-- 展示数据 -->
      <el-table :data="randomsList">
        <el-table-column prop="id" label="编号" width="190"> </el-table-column>
        <el-table-column prop="questionType" label="类型" width="150">
          <template slot-scope="scope">
            <span v-if="scope.row.questionType === '1'">单选</span>
            <span v-else-if="scope.row.questionType === '2'">多选</span>
            <span v-else>简答</span>
          </template>
        </el-table-column>
        <el-table-column label="题目编号" width="220">
          <template slot-scope="scope">
            <!-- {{scope.row.questionIDs}} -->
            <div v-for="(item, index) in scope.row.questionIDs" :key="index">
              <a @click="takenRandoms(item.id)">{{ item.number }}</a>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="addTime" label="录入时间" width="190">
        </el-table-column>
        <el-table-column prop="totalSeconds" label="答题时间(s)">
        </el-table-column>
        <el-table-column prop="accuracyRate" label="正确率(%)">
        </el-table-column>
        <el-table-column prop="userName" label="录入人"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="danger"
              plain
              icon="el-icon-delete"
              circle
              @click="removeRandoms(scope.row.id)"
            >
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-sizes="[10, 15, 20]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      >
      </el-pagination>
    </el-card>
    <!-- 数据预览 -->
    <el-dialog
      title="题目预览"
      :visible.sync="dialogTableVisible"
      @close="closeRandoms"
    >
      <!-- 题目 -->
      <el-row :gutter="20">
        <el-col :span="6">
          【题型】:
          <span v-if="texeMenu.questionType === '1'">单选</span>
          <span v-else-if="texeMenu.questionType === '2'">多选</span>
          <span v-else>简答</span>
        </el-col>
        <el-col :span="6"> 【编号】:{{ texeMenu.id }} </el-col>
        <el-col :span="6">
          【题型】:
          <span v-if="texeMenu.difficulty === '1'">简单</span>
          <span v-else-if="texeMenu.difficulty === '2'">一般</span>
          <span v-else>困难</span>
        </el-col>
        <el-col :span="6"> 【标签】:{{ texeMenu.tags }} </el-col>
      </el-row>
      <!-- 题干 -->
      <el-row :gutter="20" class="midden">
        <el-col :span="6"> 【学科】:{{ texeMenu.subjectName }} </el-col>
        <el-col :span="6"> 【目录】:{{ texeMenu.directoryName }} </el-col>
        <el-col :span="6"> 【方向】:{{ texeMenu.direction }} </el-col>
      </el-row>
      <hr />
      <!-- 单选多选 -->
      <el-row :gutter="20">
        <el-col>
          【题干】:
          <span v-html="texeMenu.question" class="strran"></span>
          <span v-if="texeMenu.questionType === '1'"
            >单选题 选项:(以下选中的为正确答案)</span
          >
          <span v-else-if="texeMenu.questionType === '2'"
            >多选题 选项:(以下选中的为正确答案)</span
          >
          <span v-else></span>
          <div v-if="texeMenu.questionType === '1'">
            <div v-for="item in texeMenu.options" :key="item.id">
              <!-- <el-radio v-if='item.isRight==="1"' checked></el-radio>
            <el-radio v-else>{{item.title}}</el-radio> -->
              <input
                type="radio"
                v-if="item.isRight === 1"
                name="1"
                class="centerran"
                checked
              />
              <input type="radio" v-else name="1" class="centerran" />{{
                item.title
              }}
            </div>
          </div>
          <div v-else-if="texeMenu.questionType === '2'">
            <div v-for="item in texeMenu.options" :key="item.id">
              <!-- <el-checkbox>{{item.title}}</el-checkbox> -->
              <input
                type="checkbox"
                v-if="item.isRight === 1"
                checked
                name="3"
                class="centerran"
              />
              <input type="checkbox" v-else name="3" class="centerran" />{{
                item.title
              }}
            </div>
          </div>
        </el-col>
      </el-row>
      <!-- 视频 -->
      <el-row :gutter="20">
        <el-col>
          【参考答案】：
          <el-button type="danger" @click="video(texeMenu)">
            视频答案预览
          </el-button>
          <br />
          <video
            v-if="isVideoShow"
            :src="texeMenu.videoURL"
            width="500px"
            height="300px"
            controls
          ></video>
        </el-col>
      </el-row>
      <hr />
      <!-- 底部 -->
      <el-row :gutter="20">
        <el-col> 【答案解析】：<span v-html="texeMenu.answer"></span> </el-col>
      </el-row>
      <hr />
      <el-row :gutter="20">
        <el-col> 【题目备注】：{{ texeMenu.remarks }} </el-col>
      </el-row>
      <!-- 关闭按钮  -->
      <el-row :gutter="20">
        <el-button type="primary" class="btn" @click="closeRandoms"
          >关闭</el-button
        >
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions';
export default {
  name: "randoms",
  data() {
    return {
      randomsList: [],
      queryInfo: {
        keyword: "",
        page: 1,
        pagesize: 10,
      },
      total: 0,
      dialogTableVisible: false,
      texeMenu: [],
      isVideoShow: false,
    };
  },
  methods: {
    // 获取数据
    async getrandoms() {
      const { data } = await randoms(this.queryInfo);
      console.log(data);
      this.randomsList = data.items;
      this.total = data.counts;
    },
    // 删除数据
    async removeRandoms(id) {
      const confirmResult = await this.$confirm(
        "此操作将永久删除该参数, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (confirmResult !== "confirm") return this.$message.info("取消删除");
      await removeRandoms({ id });
      this.$message.success("删除成功");
      this.getrandoms();
    },
    // 翻页
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize;
      this.getrandoms();
    },
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage;
      this.getrandoms();
    },
    // 搜索
    searchRandoms() {
      this.getrandoms();
    },
    // 清空
    clearRandoms() {
      this.queryInfo.keyword = "";
      this.getrandoms();
    },
    // 获取预览效果数据
    async takenRandoms(id) {
      const { data } = await detail({ id });
      console.log(data);
      this.texeMenu = data;
      // console.log(this.texeMenu);
      this.dialogTableVisible = true;
    },
    // 视频按钮
    video(texeMenu) {
      this.isVideoShow = !this.isVideoShow;
    },
    // 关闭预览效果
    closeRandoms() {
      this.dialogTableVisible = false;
      this.isVideoShow = false;
    },
  },
  created() {
    this.getrandoms();
  },
};
</script>
<style lang="less" scoped>
.nav {
  margin: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
}

.el-input {
  width: 200px;
}

.el-alert {
  margin: 15px 0;
}

.left {
  font-size: 20px;
  color: #606266;
  padding: 0 10px 0 20px;
  font-weight: 700;
}

.el-pagination {
  margin: 20px;
  float: right;
}

a {
  color: #4ea5ff;
  font-size: 14px;
  padding: 5px 0;
}

.midden {
  margin: 10px 0;
}

.strran {
  color: #6b6bff;
}

.centerran {
  margin: 5px;
}

.btn {
  display: block;
  margin: 20px auto 0;
  width: 80px;
}
</style>